<template>
    <el-card>
        我的直播
    </el-card>
    <el-card class="table">
        <div class="filter-section">
            <el-date-picker v-model="queryParams.liveTime" type="daterange" range-separator="至" start-placeholder="开播时间"
                end-placeholder="开播时间" :size="size" class="filter" @change="getLiveListFn" />
            <el-input v-model="queryParams.liveName" placeholder="请输入直播名称" clearable style="width: 500px;"
                @change="getLiveListFn"></el-input>
        </div>
        <el-table table-wrapper v-loading="loading" :data="liveList">
            <el-table-column fixed="left" label="上课日期/星期" width="180">
                <template #default="{ row }">
                    {{ formaDate(row.liveTime, 1) }}
                </template>
            </el-table-column>
            <el-table-column label="上课时间" width="180">
                <template #default="{ row }">
                    {{ formaDate(row.liveTime) }}
                </template>
            </el-table-column>
            <el-table-column label="直播标题" width="180" prop="liveName" />
            <el-table-column label="直播状态" width="180">
                <template #default="{ row }">
                    {{ liveStatu(row.liveTime) }}
                </template>
            </el-table-column>
            <el-table-column label="直播时长" width="180" prop="liveDuration" />
            <el-table-column label="班期名称" width="180" prop="className" />
            <el-table-column label="课程名称" width="180" prop="courseName" />
            <el-table-column label="讲师" width="180" prop="teacher" />
            <el-table-column label="操作" fixed="right" width="180">
                <template #default="{ row }">
                    <el-tooltip effect="drak" placement="top">
                        <template #content>
                            <a href="http://localhost:8080" target="_new">http://localhost:8080</a>
                        </template>
                    </el-tooltip>
                    <template v-if="liveStatu(row.liveTime) == '未开播'">
                        <el-button size="small" @click="openEdit(row)">编辑直播</el-button>
                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <a href="http://localhost:8080" target="_new">http://localhost:8080</a>
                            </template>
                            <el-button size="small" v-show="false">进入直播</el-button>
                        </el-tooltip>
                    </template>
                    <template v-else-if="liveStatu(row.liveTime) == '直播中'">
                        <el-button size="small" disabled @click="openEdit(row)">编辑直播</el-button>
                        <el-tooltip effect="white" placement="top">
                            <template #content>
                                <a href="http://localhost:8080" target="_new">http://localhost:8080</a>
                            </template>
                            <el-button size="small" v-show="true">进入直播</el-button>
                        </el-tooltip>
                    </template>
                    <template v-else>
                        <el-button size="small" v-show="true" disabled @click="openEdit(row)">编辑直播</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <EditLive ref="editLiveRef" @change="getLiveListFn"></EditLive>
    <el-pagination v-model:current-page="queryParams.currentPage" v-model:page-size="queryParams.pageSize"
            :page-sizes="[5, 10, 50]" layout="sizes, prev, pager, next,total,jumper" prev-text="上一页" next-text="下一页"
            :total="total" class="pagination" />
</template>

<script setup>
import { formaDate } from '@/utils/formmatTime'
import { reviseLive, getLiveList } from '@/apis/live'
import { ref, onActivated, onMounted } from 'vue'
import EditLive from '../course-live/components/EditLive.vue';

const queryParams = ref({
    liveTime: '',
    liveName: '',
    currentPage: 1,
    pageSize: 5,
})
// 数据条数
const total = ref(0)
// 加载动画
const loading = ref(false)
// 直播数据,纯数组列表
const liveList = ref([])
const liveListId = ref('')

// 请求直播数据
const getLiveListFn = async () => {
    loading.value = false
    const { data } = await getLiveList(queryParams.value)
    liveList.value = data.data.liveList
    liveListId.value = data.data._id
    total.value = data.data.total
}
// 当组件激活时触发请求数据
onActivated(() => {
    getLiveListFn()
})



// 直播状态
const liveStatu = (time) => {
    // 直播中 未开播 已结束
    let date = new Date()
    let txt = '未开播'
    if (time >= date) {
        // 开课时间大于现在
        txt = '未开播'
    } else if (time <= date && time / 1 + 1000 * 60 * 60 * 2 >= date) {
        txt = '直播中'
    } else {
        txt = '已结束'
    }
    return txt
}

const editLiveRef = ref({})

//打开编辑直播窗口
const openEdit = (row) => {
    editLiveRef.value.open(row, liveListId.value)
}
</script>


<style lang="scss" scoped>
.filter-section {
    display: flex;
    color: white;
}
</style>